import React, { useState, useEffect } from "react";
import Editor, { loader } from "@monaco-editor/react";

// 设置本地 `vs/loader.js` 路径
loader.config({
  paths: { vs: "/static/vs" }, // vs 目录的相对路径
});

// 定义组件的 props 类型
interface YamlEditorProps {
  initialValue?: string; // 初始 YAML 内容
  style?: React.CSSProperties; // 外部传入的样式
  onChanged?:(v:any)=>void;
}

const YamlEditor: React.FC<YamlEditorProps> = ({ initialValue, style,onChanged }) => {
  const [value, setValue] = useState(initialValue || ""); // 存储 YAML 内容

  // 监听 initialValue 的变化，更新编辑器内容
  useEffect(() => {
    setValue(initialValue || "");
  }, [initialValue]);

  const handleEditorChange = (newValue:any) => {
    setValue(newValue);
    if (onChanged) {
      onChanged(newValue); // 调用上层传递的回调函数
    }
  };

  // 默认样式
  const defaultStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
  };

  // 合并外部传入的样式和默认样式
  const editorStyle = { ...defaultStyle, ...style };

  return (
    <div style={editorStyle}>
      <Editor
        height="100%"
        width="100%"
        defaultLanguage="yaml"
        defaultValue="# 输入 YAML 内容"
        value={value}
        onChange={handleEditorChange}
        theme="vs-dark" // 可选主题：vs, vs-dark, hc-black
        options={{
          minimap: { enabled: false }, // 禁用迷你地图
          scrollBeyondLastLine: false, // 禁止滚动到最后一行之后
          wordWrap: "on", // 自动换行
        }}
      />
    </div>
  );
};

export default YamlEditor;